import styled from 'styled-components'

// 个人中心
export const ProfileStyle = styled.div`

    /* height: calc( 100vh - 1.3rem ); */

    .profile-header{
        height:2.4rem;
        background-color:white;
        padding:.4rem .7rem;

        .header-left{
          width: 80%;
          justify-content: unset;
          .avatar{
            margin-right:.43rem;
            width:1.6rem;
            height:1.6rem;
            border-radius:50%;
          }
          .header-info{
            height: 90%;
              /* line-height: 1.5; */
              color:#474747;
              .name{
                font-size:.4rem;
                font-weight: bold;
              }
              .mobile{
                margin-top:.3rem;
              }
          
          }
        }
       
        .header-kefu{
          img{
            width:.52rem;
            height: .52rem;
          }
        }

       
    }

    .menu{
      height: 1.61rem;
      .item-common{
        width:4.52rem;
        background-color:white;
        height:100%;
        border-radius: .13rem;
        justify-content: space-evenly;
        img{
          height:.8rem;
          width: .8rem;
        }
        div{
          line-height:1.5;
        }
        .name{
          color:#353535;
          font-size:.4rem;
          font-weight:bold;
        }
        .info{
          color:#353535;
          opacity: 0.5;
          font-size: .23rem;
          font-weight:500;
        }

      }
      .purchase-needs{
        
      }
      .my-favorites{
       
      }

    }

    .order{
      height:3.25rem;
      background-color: white;
      box-sizing:border-box;
      margin-top: .16rem;
      .order-top{
          margin-bottom: .13rem;
          padding: .4rem .4rem;
          .order-my{
            color: #353535;
            font-size:.4rem;
          }
          .order-all{
            color:#353535;
            opacity:.5;
            font-size:.27rem;
          }
      }

      .order-content{
        padding: 0 .4rem;
        height: 1.45rem;
        ul{
        height:100%;
          .order-item{
              height:100%;
              .order-img{
                width:.8rem;
                height:.8rem;
              }
              .order-type{
                color:#474747;
              }
          }
        }

      }

    }

    .tool{
      background-color:white;
      margin-top:.16rem;
      .container{
        padding: .4rem .4rem;
      }
      .tool-top{
          span{
            color:#353535;
            font-size:.4rem;
            font-weight:500;
          }
      }
      .tool-content{
        width: 8.56rem;
        ul{
          width: 100%;
          display:flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;

          .tool-item{
            /* margin-left: .001rem; */
            width: 2rem;
            margin-top:.4rem;
            .tool-img{
              width:.67rem;
              height: .67rem;
              margin-bottom:.4rem;
            }
            .tool-name{
              color: #474747;
              font-size: .32rem;
            }
          }
        }
       
      }
    }

    .version{
      text-align: center;
      position: absolute;
      bottom: 1.3rem;
      width: 100%;
      p{
        letter-spacing: .05rem;
        color: #474747;
        opacity: .4;
      }
    }



`

// 我的收藏
export const MyFavoritesStyle = styled.div`
  .main{
    height: 100%;
    background-color: #F5F5F5;
    padding: .4rem .32rem;
  }
`

// avatar 

export const HeaderAvatar = styled.div`
   .avatar-content{
      margin-top: .32rem;
      margin-bottom: 1.16rem;
          img{
            width: 1.6rem;
            height: 1.6rem;
          }
        }
    .save-avatar{
      margin: 0 .32rem;
      border: none;
      width: calc( 100% - 30px );
      height: .95rem;
      text-align: center;
      background-color: #FF762E;
      line-height: .99rem;
      border-radius: .75rem;
      color: white;
      font-size: .4rem;
      font-weight: bold;
    }
`
